{extend name='public/base' /}

{block name='content'}
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="table" lay-filter="test"></table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添 加</button>
        <button class="layui-btn layui-btn-sm" lay-event="allDel">删 除</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>删除
    </a>
</script>

<form class="layui-form" id="form" style="display: none;width: 80%;margin-top: 20px" lay-filter="example">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" lay-reqtext="请输入角色名" autocomplete="off"
                   class="layui-input name" placeholder="请输入名称">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色描述</label>
        <div class="layui-input-block">
            <textarea name="description" lay-verify="required" lay-reqtext="请输入角色描述"
                      placeholder="请输入角色描述" class="layui-textarea description"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色权限</label>
        <div class="layui-input-block">
            <div id="test12" class="demo-tree-more"></div>
        </div>
    </div>
</form>
{/block}

<!---->

{block name='js'}
<script>
    layui.use(['table', 'tree', 'form'], function () {
        let $ = layui.$,
            form = layui.form,
            tree = layui.tree,
            table = layui.table;
        //表格数据
        table.render({
            id: 'testReload',
            elem: '#table',
            toolbar: '#toolbarDemo',
            method: 'post',
            url: '/manage/system/role/list',
            title: '分类列表',
            cols: [[
                {type: 'numbers', align: 'center'},
                {type: 'checkbox'},
                {field: 'id', title: 'ID', minWidth: 80, hide: true},
                {field: 'name', title: '名称', minWidth: 120, align: 'center'},
                {field: 'description', title: '描述', minWidth: 120, align: 'center'},
                {field: 'createTime', title: '添加日期', width: 180, align: 'center'},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center'}
            ]],
            page: true
        });
        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':  //添加
                    addData();
                    break;
                case 'allDel':  //删除
                    let data = checkStatus.data;
                    delData(data);
                    break;
            }
        });
        //监听工具条
        table.on('tool(test)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'edit':  //编辑
                    editData(data);
                    break;
                case 'del':  //删除
                    delData([data]);
                    break;
            }
        });

        //添加
        function addData() {
            $("#form")[0].reset();
            $.ajax({
                url: '/manage/system/menu/getTreeList',
                method: 'post',
                success: function (res) {
                    //树形栏初始化
                    tree.render({
                        id: 'treeId1',
                        elem: '#test12',
                        data: res.data,
                        showCheckbox: true,  //是否显示复选框
                    });
                    //弹窗
                    layer.open({
                        type: 1,
                        title: '添加角色',
                        content: $('#form'),
                        area: ['600px', '600px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            //表单验证
                            if (!form.validate('.name')) {
                                return false;
                            }
                            let data = form.val('example');
                            data['menuList'] = tree.getChecked('treeId1') ?? '';
                            $.ajax({
                                'type': 'post',
                                'data': data,
                                'url': '/manage/system/role/add',
                                success: function (res) {
                                    if (res.code === 0) {
                                        layer.close(index);
                                        layer.msg('添加成功');
                                        table.reload('testReload');
                                    } else {
                                        layer.msg(res.message);
                                        return false;
                                    }
                                }
                            });
                        },
                        btn2: function (index, layero) {
                            layer.close(index);
                        }
                    });
                }
            });
        }

        function editData(arr) {
            form.val('example', {
                'name': arr.name,
                'description': arr.description,
            })
            $.ajax({
                url: '/manage/system/menu/getTreeList',
                method: 'post',
                success: function (res) {
                    //树形栏初始化
                    tree.render({
                        id: 'treeId1',
                        elem: '#test12',
                        data: res.data,
                        showCheckbox: true,  //是否显示复选框
                    });
                    //选中
                    tree.setChecked('treeId1', arr.menuList);
                    //弹窗
                    layer.open({
                        type: 1,
                        title: '修改角色',
                        content: $('#form'),
                        area: ['600px', '600px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            //表单验证
                            if (!form.validate('.name')) {
                                return false;
                            }
                            let data = form.val('example');
                            data['menuList'] = tree.getChecked('treeId1');
                            data['id'] = arr.id
                            $.ajax({
                                'type': 'post',
                                'data': data,
                                'url': '/manage/system/role/update',
                                success: function (res) {
                                    if (res.code === 0) {
                                        layer.close(index);
                                        layer.msg('修改成功');
                                        table.reload('testReload');
                                    } else {
                                        layer.msg(res.message);
                                        return false;
                                    }
                                }
                            });
                        },
                        btn2: function (index, layero) {
                            layer.close(index);
                        }
                    });
                }
            });
        }

        //删除
        function delData(data) {
            layer.confirm('确定删除这些数据吗？', function (index) {
                $.post('/manage/system/role/delete',
                    {data: data},
                    function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功')
                            table.reload('testReload');
                        } else {
                            layer.msg(res.message);
                        }
                    }
                );
            })
        }

    });
</script>
{/block}